<template id="template">
    <style>
        /* Add some styles here */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .badge {
            border-radius: 15px;
            background-color: lightcoral;
            color: white;
            text-align: center;
            display: inline-block;
            padding: 5px 5px 20px 5px;
            transform: rotate(-7deg);
            margin: 40px 20px;
            box-shadow: -1px 1px 3px 1px black;
        }

        h1 {
            font-size: 40px;
        }

        h2 {
            font-size: 30px;
        }

        h1, h2 {
            padding: 2px;
            font-family: serif;
        }

        .content {
            background-color: white;
            width: 500px;
            height: 200px;
            overflow: hidden;
            font-size: 80px;
            color: black;
            font-family: cursive;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <!-- Add HTML for your component here.
    Try adding <content></content> to project from the light DOM -->
    <section class="badge">
        <h1>Hello</h1>
        <h2>My name is:</h2>
        <div class="content">
            <h3><content></content></h3>
        </div>
    </section>
</template>
<script src="../createElement.js"></script>
<script>
    var MyBadge = createElement('my-badge', '#template');
</script>